<template>
  <div>
    <template v-if="disabled">
      <ul v-if="data[fileKey] && data[fileKey].length">
        <li v-for="(item, index) in data[fileKey]" :key="index">
          <span class="blue download" @click="downloadFile(item.fileId)">
            <span v-if="item.fileMijiCode != '20'">【{{ item.fileMijiCode | mijiCodeFilter }}级】</span>{{ item.fileName }}
          </span>
        </li>
      </ul>
      <span v-else>无</span>
    </template>
    <template v-else>
      <m-button size="mini" @click="showUploadFileDialog">{{ btnText }}</m-button>
      <ul class="el-upload-list">
        <li class="el-upload-list__item is-success" v-for="(item, index) in data[fileKey]" :key="item.fileId">
          <a class="el-upload-list__item-name">
            <i class="el-icon-document"></i>
            <span v-if="item.fileMijiCode != '20'">【{{ item.fileMijiCode | mijiCodeFilter }}级】</span>{{ item.fileName }}
          </a>
          <label class="el-upload-list__item-status-label">
            <i class="el-icon-upload-success el-icon-circle-check"></i>
          </label>
          <i class="el-icon-close" @click="removeFile(item, index)"></i>
        </li>
      </ul>

      <upload-dialog :ref="fileKey" :file-level-list="options" :upload-obj="{ limit, accept }" @toparent="updateUploadFile" />
    </template>
  </div>
</template>

<script>
import UploadDialog from '@/components/common/uploadDialog.vue'
export default {
  name: 'MUploadSm',
  components: {
    UploadDialog,
  },
  props: {
    btnText: {
      type: String,
      default: '上传附件',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
      default: () => {
        return {
          fileList: [],
        }
      },
    },
    fileKey: {
      type: String,
      default: 'fileList',
    },
    limit: {
      type: Number,
      default: 99,
    },
    accept: {
      type: String,
      default: '',
    },
    secretLevelKey: {
      type: String,
      default: 'dataLevel',
    },
    secretLevelVal: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      options: [],
    }
  },
  watch: {
    secretLevelVal: {
      immediate: true, // 避免首次渲染不触发
      handler(val) {
        this.options = this.$state['user-level-options'].filter(i => i.codeValue <= val)
      },
    },
  },
  methods: {
    hanldeDataLevelChange() {
      this.data[this.fileKey] = []
    },
    showUploadFileDialog() {
      if (this.data[this.secretLevelKey]) {
        this.$refs[this.fileKey].dialogVisible = true
      } else {
        this.$message.warning('请先选择密级')
      }
    },
    removeFile(item, index) {
      this._confirm
        .call(this, {
          content: `确定删除${item.fileName}吗？`,
          confirmText: '删除',
        })
        .then(next => {
          this.data[this.fileKey].splice(index, 1)
          this.$message.success('删除成功')
          next()
        })
    },
    updateUploadFile(fileList) {
      if (fileList) {
        this.data[this.fileKey] = this.limit == 1 ? fileList : this.data[this.fileKey].concat(fileList)
      }
      this.$refs[this.fileKey].dialogVisible = false
    },
    // 下载附件
    downloadFile(fileId) {
      window.location.href = this.$config.server + `${this.$api.downLoadMbFile}?fileId=${fileId}&flag=0`
      // window.location.href = process.env.VUE_APP_BASEURL_API + '/mb/downLoadMbFile?' + `fileId=${fileId}&flag=0`
    },
  },
}
</script>
